<template>
  <a-modal
    title="完成工作"
    :width="900"
    v-model="modelVisible"
    @ok="handleOk"
    :destroyOnClose="true"
    :confirmLoading="confirmLoading"
    centered
    :maskClosable="false"
  >
    <a-form-model ref="ruleForm" :rules="rules" :model="selectInfo">
      <a-row class="form-row" type="flex">
        <a-col :span="20" :offset="1" style="padding-top:5px;">
          <a-form-model-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="完成日期"
          >{{ selectInfo.wcsj }}</a-form-model-item>
        </a-col>
        <a-col :span="20" :offset="1" style="padding-top:5px;">
          <a-form-model-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="备注"
            prop="bz"
          >
            <!-- <a-input v-model="selectInfo.gznr" :disabled="operate=='detile'?'disabled':false" /> -->
            <a-textarea
              v-model="selectInfo.bz"
              placeholder="请输入备注"
              :auto-size="{ minRows: 8, maxRows: 8 }"
              :maxLength="600"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="20" :offset="1" style="padding-top:5px;" v-if="yqShow">
          <a-form-model-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="延期原因"
            prop="yqyy"
          >
            <a-textarea
              v-model="selectInfo.yqyy"
              placeholder="请输入延期原因"
              :auto-size="{ minRows: 8, maxRows: 8 }"
              :maxLength="600"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>
<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import { method } from '@/api/admin'

export default {
  components: {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      form: this.$form.createForm(this),
      modelVisible: false, // 弹出框显示
      confirmLoading: false, // Loading
      selectInfo: {},
      now: {},
      rules: {
        bz: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        yqyy: [{ required: true, message: '请输入延期原因', trigger: 'blur' }]
      },
      yqShow: false,
      dkinfo: {}
    }
  },
  created () {},
  methods: {
    open (record) {
      this.selectInfo = {}
      this.modelVisible = true
      this.selectInfo.wcsj = moment()
        .locale('zh-cn')
        .format('YYYY-MM-DD HH:mm:ss')
      this.selectInfo.workinfoid = record.id
      const now = new Date()
      const current = new Date(record.jzsj)
      if (now > current) {
        this.yqShow = true
      } else {
        this.yqShow = false
      }
    },
    // 确认
    handleOk () {
      const vm = this
      // 删除

      vm.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$confirm({
            title: '警告',
            content: `工作确认完成后将无法进行打卡，是否确认工作完成？`,
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk () {
              vm.confirmLoading = true
              vm.actionParam = {
                url: '/par/parworkinfo/updateParAndInsertWorkClock',
                action: 'POST',
                parameter: vm.selectInfo,
                data: {},
                message: '提交完成工作成功'
              }
              // 调用请求
              method(vm.actionParam).then(res => {
                vm.confirmLoading = false
                // 关闭弹窗
                vm.modelVisible = false
                vm.$emit('result')
              })
            },
            onCancel: () => {
              this.$notification['info']({
                message: '取消完成工作操作',
                duration: 4
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.text-overflow {
  display: block; /*内联对象需加*/
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
}
</style>
